<template>
  <div style="width:100%;height:auto; margin:0 auto;">
    <div class="filter-container" style="text-align:center;">
      <el-input v-model="queryPage.name" class="filter-item" placeholder="模板名称" style="width: 150px" clearable />
      <el-select v-model="queryPage.type" class="filter-item" placeholder="模板类型" style="width: 150px" clearable>
        <el-option v-for="item in htTypes" :key="item.code" :label="item.name" :value="item.code" />
      </el-select>

      <el-button class="filter-item" icon="el-icon-search" type="primary" @click="search()">
        查询
      </el-button>
    </div>

    <el-table v-loading="listLoading" :data="list" height="540" fit highlight-current-row style="width: 100%;" border @current-change="handleCurrentChange">
      <el-table-column label="序号" type="index" :index="indexMethod" header-align="center" align="center" width="80" />
      <el-table-column header-align="center" label="操作" width="120">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="addGroup(scope)">目录管理</el-button>
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="left" label="模板名称">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="left" label="模板类别" width="150">
        <template slot-scope="scope">
          <span>{{ getDicName(scope.row.flag,'CDS_TEMPLATE_TYPE') }}</span>
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="left" label="备注">
        <template slot-scope="scope">
          <span>{{ scope.row.remark }}</span>
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="left" label="状态" width="150">
        <template slot-scope="scope">
          <span>{{ getDicName(scope.row.state,'YW_BASE_STATUS') }}</span>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-dialogDrag :visible.sync="uploadFilesVisible" width="1200px" :close-on-click-modal="false" append-to-body title="目录管理">
      <upload-files v-if="uploadFilesVisible" ref="uploadFiles" style="height:540px" :proid="code" :visible.sync="uploadFilesVisible" />
    </el-dialog>

    <pagination v-show="total>-1" :total="total" :page.sync="queryPage.page" :limit.sync="queryPage.limit" @pagination="loadList" />
    <span slot="footer" class="dialog-footer">
      <div style="text-align:center;margin-top:20px;">
        <el-button type="primary" @click="onSave">确定</el-button>
        <el-button type="danger" class="quxiao_btn" @click="closePage()">取消</el-button>
      </div>
    </span>
  </div>
</template>

<script>

import { getPage } from '@/api/catalogManage'
import { saveData } from '@/api/catalogRelation'
import { getDictListByCode } from '@/api/dict'

import { Message } from 'element-ui'
import Pagination from '@/components/Pagination'
import UploadFiles from '../public/addGroup' // eslint-disable-line no-unused-vars

export default {
  components: { Pagination, UploadFiles },
  props: {
    proid: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      listLoading: false,
      uploadFilesVisible: false,
      queryPage: {
        page: 1,
        limit: 10
      },
      total: 0,
      form: {},
      list: [],
      xmStatus: [],
      htTypes: []
    }
  },
  created() {
    this.getDictList('CDS_TEMPLATE_TYPE')
    this.getDictList('YW_BASE_STATUS')
    this.loadList()
  },
  methods: {
    indexMethod(index) {
      return (index + 1) + (this.queryPage.page - 1) * this.queryPage.limit
    },
    getDictList(code) {
      getDictListByCode(code).then(response => {
        if (code === 'CDS_TEMPLATE_TYPE') {
          this.htTypes = response.data
        }
        if (code === 'YW_BASE_STATUS') {
          this.xmStatus = response.data
        }
      })
    },
    getDicName(code, flag) {
      var dict = []
      if (flag === 'CDS_TEMPLATE_TYPE') {
        dict = this.htTypes
      } else if (flag === 'YW_BASE_STATUS') {
        dict = this.xmStatus
      }
      for (var i in dict) {
        if (dict[i].code === code) {
          return dict[i].name
        }
      }
    },
    search() { // 查询
      this.loadList()
    },
    loadList() { // 加载列表
      this.list = []
      this.listLoading = true
      getPage(this.queryPage).then(response => {
        const { data } = response
        this.list = data.records

        this.total = parseInt(data.total)
        this.listLoading = false
      }).catch(response => {
        this.listLoading = false
      })
    },
    addGroup(scope) {
      this.uploadFilesVisible = true
      this.code = scope.row.id
      this.$nextTick(() => {
        this.$refs.uploadFiles
        this.$refs.uploadFiles.getDetailed()
      })
    },
    //保存选中结果
    handleCurrentChange(val) {
      this.currentRow = val
    },
    onSave() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      this.form.xmId = this.proid
      this.form.catalogId = this.currentRow.id

      saveData(this.form).then(response => {
        Message({
          message: '新增成功',
          type: 'success',
          duration: 5 * 1000
        })

        loading.close()
        this.$emit('update:visible', false)
        // 重新加载表格
        this.getList()
      }).catch(response => {
        loading.close()
        // 重新加载表格
        this.getList()
      })
    },
    closePage() {
      this.$emit('update:visible', false)
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
